<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<el-alert type="warning" title="优盾官网：https://www.uduncloud.com，用户开启充值，每种充值方式会消耗一个地址数量，请谨慎使用"
				:closable="false" show-icon />
		</el-card>
		<el-card shadow="never" class="!border-none">
			<el-form ref="formRef" class="ls-form" label-position="top">
				<el-form-item label="商户号" prop="merchant_no">
					<div class="w-80">
						<el-input v-model.trim="udunData.merchant_no" placeholder="请输入商户号"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="APIKEY" prop="api_key">
					<div class="w-80">
						<el-input v-model.trim="udunData.api_key" placeholder="请输入APIKEY"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="接口地址" prop="gateway_address">
					<div class="w-80">
						<el-input v-model.trim="udunData.gateway_address" placeholder="请输入接口地址"></el-input>
						<div class="form-tips">接口节点地址，请查询优盾后台</div>
					</div>
				</el-form-item>
				<el-form-item label="回调地址" prop="callUrl">
					<div class="w-80">
						<el-input v-model.trim="udunData.callUrl" placeholder="请输入回调地址"></el-input>
						<div class="form-tips">站点回调地址，默认：接口域名/adminapi/notify/notify</div>
					</div>
				</el-form-item>
				<el-form-item label="开启代付" prop="is_open_df">
					<div>
						<el-switch v-model="udunData.is_open_df" :active-value="'1'" :inactive-value="'0'" />
						<span class="mt-1 ml-2">
							{{ udunData.is_open_df=='1' ? '开启' : '关闭' }}
						</span>
					</div>
				</el-form-item>
				<el-form-item label="代付金额-最低" prop="pay_min" v-if="udunData.is_open_df == 1">
					<div class="w-80">
						<el-input v-model.trim="udunData.pay_min" placeholder="请输入最低代付金额"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="代付金额-最高" prop="pay_max" v-if="udunData.is_open_df == 1">
					<div class="w-80">
						<el-input v-model.trim="udunData.pay_max" placeholder="请输入最高代付金额"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="代付-提现方式"  v-if="udunData.is_open_df == 1">
					<div class="w-80">
						<div class="bg-fill-light p-4 mb-4" v-for="method in udunData.methods" :key="method.id">
							<div class="mb-2">提现方式：{{method.name}}</div>
							<div class="mb-2">
								<el-switch v-model="method.is_open_df" :active-value="1" :inactive-value="0" />
								<span class="mt-1 ml-2">
									{{ method.is_open_df==1 ? '开启代付' : '关闭代付' }}
								</span>
							</div>
							<div class="mb-2">
								<el-input v-model.trim="method.main_coin_type" placeholder="请输入主币种编号"></el-input>
							</div>
							<div class="">
								<el-input v-model.trim="method.coin_type" placeholder="请输入子币种编号"></el-input>
							</div>
						</div>
					</div>
				</el-form-item>
			</el-form>
		</el-card>

		<footer-btns v-perms="['setting.web.web_setting/setWebsite']">
			<el-button type="primary" @click="handleSubmit">保存</el-button>
		</footer-btns>
	</div>
</template>

<script lang="ts" setup name="dictType">
	import { isEmpty } from 'lodash-es';
	import { useDictOptions } from '@/hooks/useDictOptions'
	import { getWebsiteProject, setWebsiteProject } from '@/api/setting/website'
	
	const name = ref('udun')
	
	// 表单数据
	const udunData = reactive({
		merchant_no: "",
		api_key: "",
		gateway_address: "",
		callUrl: "",
		debug: "0",
		is_open_df:1,
		pay_min:0,
		pay_max:0,
		methods:[]
	})
	const handleSubmit = async () => {
		await setWebsiteProject({ name: name.value, content: udunData })
		getData()
	}

	const getData = async () => {
		const data = await getWebsiteProject({ name: name.value })
		if (!isEmpty(data.data)) {
			for (const key in udunData) {
				if (data.data[key] != null && data.data[key] != undefined) {
					//@ts-ignore
					udunData[key] = data.data[key]
				}
			}
		}
	}

	getData()
</script>

<style lang="scss" scoped></style>